<!--
 - Author : wang885298.
 - Date   : 2018/7/13.
 - File   : header.通用头部
 -->

<template>
  <div class="header">
    <div class="title">
      <img src="../assets/images/elogo.png" alt="logo" class="elogo">
      <span>锚点配置中心</span>
    </div>
    <div class="right">
      <div class="time">
        <span class="span">今天是{{date}}</span>
        <span class="span">{{week}}</span>
        <span class="span">{{time}}</span>
      </div>
      <span>超级管理员</span>
      <span>所属部门:XX省公安厅</span>
      <span class="out" @click="outUser()">【退出】</span>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        currentdate: '',
        date: '',
        week: '',
        time: ''
      }
    },
    mounted () {
      this.$nextTick(function () {
        setInterval(this.getNowFormatDate, 1000)
      })
    },
    methods: {
      getNowFormatDate() {
        //获取当前日期
        let date_time = new Date()
        //定义星期
        let week
        //switch判断
        switch (date_time.getDay()) {
          case 1:
            week = '星期一'
            break;
          case 2:
            week = '星期二';
            break;
          case 3:
            week = '星期三';
            break;
          case 4:
            week = '星期四';
            break;
          case 5:
            week = '星期五';
            break;
          case 6:
            week = '星期六';
            break;
          default:
            week = '星期天';
            break;
        }

        //年
        let year = date_time.getFullYear()
        //判断小于10，前面补0
        if (year < 10) {
          year = '0' + year
        }

        //月
        let month = date_time.getMonth() + 1
        //判断小于10，前面补0
        if (month < 10) {
          month = '0' + month
        }

        //日
        let day = date_time.getDate()
        //判断小于10，前面补0
        if (day < 10) {
          day = '0' + day
        }

        //时
        let hours = date_time.getHours()
        //判断小于10，前面补0
        if (hours < 10) {
          hours = '0' + hours
        }

        //分
        let minutes = date_time.getMinutes()
        //判断小于10，前面补0
        if (minutes < 10) {
          minutes = '0' + minutes
        }

        //秒
        let seconds = date_time.getSeconds()
        //判断小于10，前面补0
        if (seconds < 10) {
          seconds = '0' + seconds
        }

        //拼接年月日时分秒
        this.currentdate = year + '年' + month + '月' + day + '日 ' + '' + week  + '' + hours + '：' + minutes + '：' +
          seconds
        this.date = year + '年' + month + '月' + day + '日 '
        this.week = week
        this.time = hours + '：' + minutes + '：' + seconds
      },
      outUser() {
        this.$confirm('退出当前系统, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push('/')
        }).catch(() => {
        });
      }
    }
  }
</script>

<style lang="less">
  .header{
    background-color: #212d3f;
    display: flex;
    .elogo {
      display: block;
      float: left;
      margin-top: 13px;
      margin-right: 10px;
    }
    .title{
      font-size: 22px;
      flex: 3;
      min-width: 280px;
      padding-top: 10px;
      line-height: 28px;
      span{
        display: block;
        float: left;
        line-height: 60px;
      }
    }
    .time{
      color: #b5b3b3;
      font-size: 15px;
      line-height: 25px;
      padding-top: 13px;
      padding-right: 6px;
      .span{
        padding-right: 2px;
        padding-left: 0;
      }
    }
    .right{
      line-height: 23px;
      text-align: right;
      flex: 11;
      min-width: 420px;
      font-size: 15px;
      span{
        padding-left: 44px;
      }
      .out{
        color: #818181;
        cursor: pointer;
        &:hover {
          color: #666666;
        }
      }
    }
  }
</style>
